<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="故障对象id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="objId">
              <a-input-number v-model="model.objId" placeholder="请输入故障对象id" style="width: 100%" />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">
            <a-form-model-item label="故障对象类别(1-车辆 2-插座 3-电池柜)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="objType">
              <a-input v-model="model.objType" placeholder="请输入故障对象类别(1-车辆 2-插座 3-电池柜)"  ></a-input>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="故障对象类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="objType">
            <a-select v-model="model.objType" placeholder="请选择故障对象类别">
              <a-select-option v-for="item in objTypeDict" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          </a-col>


          <a-col :span="24">
            <a-form-model-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="longitude">
              <a-input v-model="model.longitude" placeholder="请输入经度" @click="toggleMapVisibility"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="维度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="latitude">
              <a-input v-model="model.latitude" placeholder="请输入维度" @click="toggleMapVisibility"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24" v-if="showMap">
            <tencent-map
              ref="map"
              :visible="visibles"
              :longitude="model.longitude"
              :latitude="model.latitude"
              @dblclick="datass"
              @click="handleMapClick">
            </tencent-map>
          </a-col>


          <a-col :span="24">
            <a-form-model-item label="故障编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultCode">
              <a-input v-model="model.faultCode" placeholder="请输入故障编号"  ></a-input>
            </a-form-model-item>
          </a-col>

<!--          <a-col :span="24">
            <a-form-model-item label="故障编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultCode">
              <a-select
                v-model="model.faultCode"
                showSearch
                placeholder="请输入故障编号"
                :filterOption="false"
                @search="handleFaultCodeSearch"
                @change="handleFaultCodeChange"
                style="width: 100%"
              >
                <a-select-option v-for="item in faultCodeOptions" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="故障描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultDesc">
              <a-textarea v-model="model.faultDesc" rows="4" placeholder="请输入故障描述" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="故障状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultStatus">
<!--              <a-input v-model="model.faultStatus" placeholder="请输入故障状态 0-待处理 1-处理中 2-已解决 3-已关闭"  ></a-input>-->
              <a-select v-model="model.faultStatus" placeholder="请选择故障对象类别">
                <a-select-option v-for="item in faultStatusDict" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
<!--
          <a-col :span="24">
            <a-form-model-item label="故障处理人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultHandler">
              <a-input v-model="model.faultHandler" placeholder="请输入故障处理人"  ></a-input>
            </a-form-model-item>
          </a-col>
-->

          <a-col :span="24">
            <a-form-model-item label="故障处理人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultHandler">
              <j-select-user-by-dep store="id" v-model="model.faultHandler" ></j-select-user-by-dep>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="上报处理人手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" placeholder="请输入维度"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="解决时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="resolvedDate" >
              <j-date placeholder="请选择解决时间" v-model="model.resolvedDate"  date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="故障来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultFrom" >
              <a-select v-model="model.faultFrom" placeholder="请输入故障来源"   >
                <a-select-option v-for="item in faultFromDict" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="故障上报人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="faultReporter">
              <j-select-user-by-dep store="id" v-model="model.faultReporter" ></j-select-user-by-dep>
<!--              <a-input v-model="model.faultReporter" placeholder="请输入故障上报人"  ></a-input>-->
            </a-form-model-item>
          </a-col>

<!--          <a-col :span="24" v-if="visible">
            <a-form-model-item  label="套餐配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageConfigId">
              &lt;!&ndash; <a-input-number v-model="model.cabinetState" placeholder="请输入柜子状态（1：初始，2使用中，3：维护中，4：报废）" style="width: 100%" /> &ndash;&gt;
              <a-select   v-model="model.packageConfigId" placeholder="请选择套餐配置">
                <a-select-option v-for="(item, index)  in datasslist" :key="index.toString()" :value="item.id"> {{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="报告时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportedDate" >
              <j-date placeholder="请选择报告时间" v-model="model.reportedDate" date-format="YYYY-MM-DD HH:mm:ss"  style="width: 100%" />
            </a-form-model-item>
          </a-col>


        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import TencentMap from "@comp/map/TencentMap";
  export default {
    name: 'RentalFaultHandleForm',
    components: {
      TencentMap
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        showMap: false,
        visibles: false,
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           objId: [
              { required: true, message: '请输入故障对象id!'},
           ],
           objType: [
              { required: true, message: '请输入故障对象类别(1-车辆 2-插座 3-电池柜)!'},
           ],
           faultCode: [
              { required: true, message: '请输入故障编号!'},
           ],
           isDelete: [
              { required: true, message: '请输入是否删除（0：否、1：是）!'},
           ],
        },
        objTypeDict:[
          {
            label: "车辆",
            value: "1"
          },{
            label: "插座",
            value: "2"
          },{
            label: "电池柜",
            value: "3"
          }],
        faultFromDict:[
          {
            label: "客户上报",
            value: "1"
          },{
            label: "日常维护",
            value: "2"
          }],
        faultStatusDict:[
          {
            label: "待处理",
            value: "0"
          },{
            label: "处理中",
            value: "1"
          },{
            label: "已解决",
            value: "2"
          },{
            label: "已关闭",
            value: "3"
          }],
        datasslist:[],
        url: {
          add: "/rental/fault-handle/add",
          edit: "/rental/fault-handle/edit",
          queryById: "/rental/fault-handle/queryById",
          packageConfig:"/rental/package-config/list",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getPackageConfig();
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        // 编辑时也设置默认经纬度
        this.setDefaultCoordinates();
        this.updateMapMarker();
      },
      toggleMapVisibility() {
        this.showMap = !this.showMap;
        this.visibles = !this.visibles;
      },
      handleMapClick(e) {
        // 更新经纬度
        this.model.latitude = e.latLng.lat();
        this.model.longitude = e.latLng.lng();
        this.updateMapMarker();
      },
      datass(e) {
        this.visibles = false;
        this.model.latitude = e.location.lat.toString();
        this.model.longitude = e.location.lng.toString();
        this.$forceUpdate();
      },
      updateMapMarker() {
        if (this.$refs.map && this.model.latitude && this.model.longitude) {
          this.$refs.map.updateMarker(this.model.latitude, this.model.longitude);
        }
      },
      setDefaultCoordinates() {
        if (!this.model.latitude) {
          this.model.latitude = this.defaultLatitude;
        }
        if (!this.model.longitude) {
          this.model.longitude = this.defaultLongitude;
        }
      }
    ,

     /* handleFaultCodeSearch(value) {
        // 假设有一个 API 可以搜索故障编号
        getAction('/api/fault_code/search', { query: value })
          .then((response) => {
            if (response.success) {
              this.faultCodeOptions = response.result.map(item => ({
                value: item.code,
                label: item.description,
              }));
            } else {
              this.$message.warning(response.message);
            }
          })
          .catch((error) => {
            console.error(error);
          });
      },*/
      getPackageConfig(){
        let that=this;
        let data={pageSize:100,pageNo:1}
        getAction(this.url.packageConfig,data).then((res)=>{
          let datass=[]
          res.result.records.forEach(itme=>{
            datass.push({name:itme.packageName,id:itme.id})
          })
          this.datasslist=datass;
        }).finally(() => {

        })
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>